<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题目列表</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">

      <div style="float: left;">
          <el-button type="primary" @click="showAddPage">添加问题</el-button>
          <el-button type="danger" @click="deleteMany()">批量删除</el-button>
      </div>
      <!-- 题目列表 -->
      <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="questionId" label="题目id" width="120">
          </el-table-column>
          <el-table-column prop="questionText" label="内容" width="350">
          </el-table-column>
          <el-table-column label="等级">
              <template slot-scope="scope">
                  {{getStar(scope.row.questionStar)}}
              </template>
          </el-table-column>

          <!--<el-table-column prop="createTime" label="提交时间">-->
          <!--</el-table-column>-->
          <!--<el-table-column prop="updateTime" label="提交时间">-->
          </el-table-column>
          <el-table-column label="答案列表" width="180">
              <template slot-scope="props">
                  <el-button type="warning" @click="showAnswers(props.row)">问题列表</el-button>
              </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
              <template slot-scope="props">
                  <el-button type="warning" @click="showEditQuestion(props.row)">编辑</el-button>
                  <el-button type="danger" @click="deleteQuestion(props.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>

      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.currentPage"
              :page-sizes="[3,5,8]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
      </el-pagination>

      <!-- 答案列表 -->
      <div style="float: left;">
          <el-button type="primary" @click="showAddAnswerPage">添加答案</el-button>
      </div>
      <el-table :data="answerTableData" ref="multipleTable" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="optionId" label="答案id" width="120">
          </el-table-column>
          <el-table-column prop="questionId" label="题目Id" width="240">
          </el-table-column>
          <el-table-column prop="score" label="答案分数" width="240">
          </el-table-column>
          <el-table-column prop="optionText" label="答案内容" width="350">
          </el-table-column>

          <el-table-column label="操作" width="180">
              <template slot-scope="props">
                  <el-button type="warning" @click="showEditOption(props.row)">编辑</el-button>
                  <el-button type="danger" @click="deleteOption(props.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>



      <el-dialog title="添加答案信息" :visible.sync="addPage" @close="resetAddForm('addForm')">
          <el-form :model="answerFormData" ref="addForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="答案id" prop="optionId" v-show="false">
                  <el-input v-model="answerFormData.optionId"></el-input>
              </el-form-item>
              <el-form-item label="试题id" prop="questionId" v-show="false">
                  <el-input v-model="answerFormData.questionId" ></el-input>
              </el-form-item>
              <el-form-item label="答案分数" prop="score" v-show="true">
                  <el-input v-model="answerFormData.score"></el-input>
              </el-form-item>
              <el-form-item label="答案内容" prop="optionText" v-show="true">
                  <el-input v-model="answerFormData.optionText"></el-input>
              </el-form-item>
              <el-form-item align="right">
                  <el-button type="primary" @click="addOption()">添加</el-button>
                  <el-button @click="resetForm('addForm')">重置</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>

      <el-dialog title="修改答案信息" :visible.sync="editAnswer" @close="resetAnswerForm('editForm')">
          <el-form :model="answerEditFormData" ref="editForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="答案id" prop="optionId" v-show="false">
                  <el-input v-model="editFormData.optionId"></el-input>
              </el-form-item>
              <el-form-item label="试题id" prop="questionId" v-show="false">
                  <el-input v-model="editFormData.questionId"></el-input>
              </el-form-item>
              <el-form-item label="答案分数" prop="score" v-show="true">
                  <el-input v-model="editFormData.score"></el-input>
              </el-form-item>
              <el-form-item label="答案内容" prop="optionText" v-show="true">
                  <el-input v-model="editFormData.optionText"></el-input>
              </el-form-item>
              <el-form-item align="right">
                  <el-button type="primary" @click="updateOption()">更新</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>


      <el-dialog title="添加题目信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
          <!--
              :model="formData": 关联数据
              :rules: 关联校验规则
              ref： 在获取表单对象时使用
          -->
          <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="题目id" prop="questionId" v-show="false">
                  <el-input v-model="formData.questionId"></el-input>
              </el-form-item>
              <el-form-item label="题目描述" prop="questionText" >
                  <el-input type="textarea" v-model="formData.questionText"></el-input>
              </el-form-item>
              <el-form-item label="题目难度" prop="questionStar">
                  <el-select v-model="formData.questionStar" placeholder="请选择题目难度系数">
                      <el-option
                              v-for="item in paper"
                              :key="item.id"
                              :label="getStar(item.star)"
                              :value="item.level"
                      ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item align="right">
                  <el-button type="primary" @click="addQuestion()">添加</el-button>
                  <el-button @click="resetForm('addForm')">重置</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>

      <el-dialog title="编辑题目" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')">
          <!--
              :model="formData": 关联数据
              :rules: 关联校验规则
              ref： 在获取表单对象时使用
          -->
          <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="题目id" prop="questionId" v-show="false">
                  <el-input v-model="editFormData.questionId"></el-input>
              </el-form-item>
              <el-form-item label="题目描述" prop="questionText" >
                  <el-input type="textarea" v-model="editFormData.questionText"></el-input>
              </el-form-item>
              <el-form-item label="题目难度" prop="questionStar">
                  <el-select v-model="editFormData.questionStar" placeholder="请选择题目难度系数">
                      <el-option
                              v-for="item in paper"
                              :key="item.id"
                              :label="getStar(item.star)"
                              :value="item.level"
                              :selected="editFormData.questionStar == item.star"
                      ></el-option>
                  </el-select>
              </el-form-item>

              <el-form-item align="right">
                  <el-button type="warning" @click="updateQuestion()">修改</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>
  </div>
<script>

    new Vue({
        el:"#app",
        data: {
            questionId:"",
            rowNow:"",
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            addPage:false,
            editAnswer:false,
            formData: {},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData: [],//表格数据
            answerFormData: {},//添加表单的数据
            answerEditFormData: {},//编辑表单的数据
            answerTableData: [],//表格数据
            multipleSelection: [],//全选框
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            paper: {},
            rules: {
                questionText: [
                    { required: true, message: '请输入题目描述', trigger: 'change' },
                ],
                questionStar: [
                    { required: true, message: '请选择题目难度系数', trigger: 'change' }
                ],
            }
        },
        methods: {
            //批量删除
            deleteMany() {
                this.$alert('确定删除?', '删除提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        let num = "";
                        for (let el of this.multipleSelection) {
                            num += el.questionId + ",";
                        }
                        //console.log(num);
                        axios.delete("../question/many/"+num)
                            .then(resp => {
                                if (resp.data) {
                                    action = "删除成功!";
                                    this.selectByPage();
                                    this.$message({
                                        type: 'info',
                                        message: `action: ${ action }`
                                    });
                                } else {
                                    action = "删除失败!";
                                    this.$message({
                                        type: 'info',
                                        message: `action: ${ action }`
                                    });
                                }
                            })
                            .catch(error => {
                                console.log(error);
                            })

                    }
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //删除题目信息
            deleteQuestion(row) {
                this.$confirm('此操作将永久删除' + row.questionId + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("../question/"+row.questionId)
                        .then(resp => {
                            if (resp.data) {
                                this.dialogTableVisible4edit = false;
                                this.selectByPage();
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                if (confirm("确定要删除" + row.questionId + "数据吗?")) {

                }
            },
            //修改题目信息
            updateQuestion() {
                axios.put("../question", this.editFormData)
                    .then(resp => {
                        if (resp.data) {
                            this.dialogTableVisible4edit = false;
                            this.selectByPage();
                        } else {
                            alert("修改失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //添加问题
            addQuestion() {
                axios.post("../question", this.answerFormData)
                    .then(resp => {
                        if (resp.data) {
                            this.addPage = false;
                            this.selectByPage();
                        } else {
                            alert("添加失败");
                        }

                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //分页查询
            selectByPage() {
                axios.get("../question/"+this.pagination.currentPage+"/"+this.pagination.pageSize)
                    .then(resp => {
                        //将查询出的数据赋值tableData
                        this.tableData = resp.data.records;
                        //设置分页参数
                        //当前页
                        this.pagination.currentPage = resp.data.current;
                        //总条数
                        this.pagination.total = resp.data.total;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },
            showAddPage() {
                this.getPaper();
                //弹出窗口
                this.dialogTableVisible4add = true;
            },
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
            },
            showEditQuestion(row) {
                this.getPaper();
                //1. 弹出窗口
                this.dialogTableVisible4edit = true;

                //2. 显示表单数据
                this.editFormData = {
                    questionId: row.questionId,
                    questionText: row.questionText,
                    questionStar: row.questionStar,
                }
            },
            getStar(star){
                let level = "★";
                for (let i = 0; i < star-1; i++) {
                    level+="★";
                }
                return level;
            },
            getPaper(){
                axios.get("../paper").then(resp=>{
                    if (resp.data){
                        this.paper = resp.data
                    }
                });
            },
            //删除试题类型信息
            deleteOption(row) {
                this.$confirm('此操作将永久删除' + row.optionId + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("../option/" + row.optionId)
                        .then(resp => {
                            if (resp.data) {
                                this.editAnswer = false;
                                this.showAnswers(this.rowNow);
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            } else {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                if (confirm("确定要删除" + row.optionId + "数据吗?")) {

                }
            },
            //修改试题类型信息
            updateOption() {
                axios.put("../option", this.editFormData)
                    .then(resp => {
                        if (resp.data) {
                            this.editAnswer = false;
                            this.showAnswers(this.rowNow);
                        } else {
                            alert("修改失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //添加问题
            addOption() {
                axios.post("../option", this.answerFormData)
                    .then(resp => {
                        if (resp.data) {
                            this.addPage = false;
                            this.showAnswers(this.rowNow);
                        } else {
                            alert("添加失败");
                        }

                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            showAddAnswerPage() {
                this.answerFormData.questionId=this.questionId;
                //弹出窗口
                this.addPage = true;

            },
            resetAddForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.answerFormData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
            },
            showEditOption(row) {
                //1. 弹出窗口
                this.editAnswer= true;

                //2. 显示表单数据
                this.editFormData = {
                    optionId: row.optionId,
                    questionId: row.questionId,
                    score: row.score,
                    optionText: row.optionText,
                }
            },
            showAnswers(row){
                this.rowNow = row;
                this.questionId = row.questionId;
                axios.get("../option/" +row.questionId)
                    .then(resp => {
                        //将查询出的数据赋值tableData
                        this.answerTableData = resp.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        mounted() {
            this.selectByPage();
        }
    })
</script>
</body>
</html>